
{block content}

<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>

<script type='text/javascript'>

    $(document).ready(function() {
	
	$('#calendar').fullCalendar({
		
	    editable: true,
			
	    eventSources: [

        // your event source
        {
            url: 'Reservation:create',
            type: 'GET',

            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        }

        // any other sources...

    ],
			
	    eventDrop: function(event, delta) {
		alert(event.title + ' was moved ' + delta + ' days\n' +
		    '(should probably update your database)');
	    },
			
	    loading: function(bool) {
		if (bool) $('#loading').show();
		else $('#loading').hide();
	    },
	    eventClick: function(event) {
		// opens events in a popup window
		//window.open(event.url, 'gcalevent', 'width=700,height=600');
		alert(event.test);
		return false;
	    }
			
	});
		
    });

</script>
<style type='text/css'>

    /*    body {
	    margin-top: 40px;
	    text-align: center;
	    font-size: 14px;
	    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	}*/

    #loading {
	position: absolute;
	top: 5px;
	right: 5px;
    }

    #calendar {
	width: 650px;
	margin: 0 auto;
    }

</style>